<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Component</title>
    <link rel="stylesheet" href="styles/componentStyle.css">
</head>
<body>
    <div id="example">
        <h1>1. A simple one</h1>
        <button-counter></button-counter>
        <h1>2. Blog Application</h1>
        <div v-bind:style="{ fontSize: postFontSize + 'em' }">
           <blog-post
            v-for="post in posts"
            v-bind:key="post.id"
            v-bind:post="post"
            v-on:enlarge-text="postFontSize += 0.1"></blog-post> 
        </div>
        <h1>3. Using v-model</h1>
        <custom-input v-model="searchText"></custom-input>
        <h1>4. Using slot</h1>
        <alert-box>Something is going wrong!</alert-box>
        <h1>5. Dynamic component</h1>
        <div id="dynamic-component-demo" class="demo">
            <button
            v-for="tab in tabs"
            v-bind:key="tab"
            v-bind:class="['tab-button', {active: currentTab === tab}]"
            v-on:click="currentTab = tab">
                {{ tab }}
            </button>

            <component v-bind:is="currentTabComponent" class="tab"></component>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script>
        Vue.component('button-counter', {
            data: function() {
                return { count: 0 }
            },
            template: '<button class="button-counter" v-on:click="count++">You clicked me {{ count }} times.</button>'
        })
        Vue.component('blog-post', {
            props: ['post'],
            template: `
            <div class="blog-post">
                <h3>{{ post.title }}</h3>
                <button class="enlarge-button" v-on:click='$emit("enlarge-text")'>Enlarge text</button>
                <br><br>
                <div v-html="post.content"></div>
            </div>
            `
        })
        Vue.component('custom-input', {
            props: ['value'],
            template: `
            <input
            v-bind:value="value"
            v-on:input="$emit('input', $event.target.value)"
            >
            `
        })
        Vue.component('alert-box', {
            template: `
            <div class="demo-alert-box">
                <strong>ERROR!</strong>
                <slot></slot>
            </div>
            `
        })
        var example = new Vue({
            el: '#example',
            data: {
                posts: [
                    {id: 1, title: 'My hourney with Vue', content:'I love using Vue to create a web page.'},
                    {id: 2, title: 'Blogging with Vue', content: 'This is a blog-show application using Vue to perform.'},
                    {id: 3, title: 'Why Vue is so fun', content: 'Vue is fun not funny, because of its reactive and MVVM charactor'}
                ],
                postFontSize: 1,
                searchText: 'Do you want to eat?',
                currentTab: "Button counter",
                tabs: ["Button counter", "Custom input", "Alert box"]
            },
            computed: {
                currentTabComponent: function() {
                    return this.currentTab.toLowerCase().split(" ").join("-");
                }
            }
        })
    </script>
</body>
</html>